div {
    left: -1px;
    top: -1px;
}
.container {
    width: 900px;
    height: 700px;
    margin: auto;
    background-color: #DCDCDC;
    position: relative;
    border: 1px solid black;
}
.leftbox {
    width: 150px;
    height: 700px;
    background-color: #696969;
    position: absolute;
    border: 1px solid black;
}
.head {
    width: 100px;
    height: 100px;
    margin: 25px 25px;
    text-align: center;
    border: 1px solid black;
    position: absolute;
}
.img {
    overflow: hidden;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    margin: 0 0 0 10px;
    text-align: 80px;
    border: 1px solid black;
}
.home,.goods,.indent,.finance,.data,.setting {
    width: 150px;
    height: 40px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    position: absolute;
}
.home {
    top: 200px;
    line-height: 40px;
    color: white;
    background-color: black;
    border: 1px solid black;
}
.goods {
    top: 252px;
    line-height: 40px;
    border: 1px solid black;
}
.indent {
    top: 304px;
    line-height: 40px;
    border: 1px solid black;
}
.finance {
    top: 356px;
    line-height: 40px;
    border: 1px solid black;
}
.data {
    top: 408px;
    line-height: 40px;
    border: 1px solid black;
}
.setting {
    top: 460px;
    line-height: 40px;
    border: 1px solid black;
}
.click1 {
    color:black;
    background-color: #696969;
}
.click2 {
    color:white;
    background-color: black;
}
/* ----------------------------------- */
.box1 {
    left: 150px;
    width: 750px;
    height: 50px;
    background-color: black;
    position: absolute;
}
.sbox1,.sbox2,.sbox3{
    user-select: none;
    cursor: pointer;
    width: 100px;
    height: 40px;
    margin: 5px;
    color: white;
    line-height: 40px;
    text-align: center;
    background-color: black;
    position: absolute;
}
.sbox1{
    left: 300px;
}
.sbox2{
    left: 450px;
}
.sbox3{
    left: 600px;
}
.hbox1,.hbox2 {
    z-index: 1;
    user-select: none;
    cursor: pointer;
    position: absolute;
    background-color: #DCDCDC;
    left: -75px;
    top: 100%;
    width: 250px;
    height: 143px;
    border-radius: 10px;
    border: 1px solid black;
    overflow: hidden;
}
.hsbox1,.hsbox2{
    width: 250px;
    position: absolute;
    color: black;
}
.hsbox1 {
    height: 45px;
}
.hsbox2 {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    height: 50px;
    top: 42px;
}
.hsbox3 {
    top: 94px;
    width: 250px;
    height: 50px;
    color: black;
    position: absolute;
}
.hgbox1 {
    width: 50px;
    height: 40px;
    top: 5px;
    font-size: 40px;
    position: absolute;
}
.hgbox2 {
    width: 150px;
    height: 60px;
    left: 30px;
    top: 10px;
    line-height: 15px;
    position: absolute;
}
.hgbox3 {
    width: 60px;
    height: 60px;
    left: 180px;
    top: 5px;
    position: absolute;
}
.hgbox4 {
    width: 50px;
    height: 40px;
    top: 3px;
    font-size: 40px;
    position: absolute;
}
.hgbox5 {
    width: 150px;
    height: 60px;
    left: 30px;
    top: 8px;
    line-height: 15px;
    position: absolute;
}
.hgbox6 {
    width: 60px;
    height: 60px;
    left: 180px;
    top: 3px;
    position: absolute;
}
.enter {
    background-color: #808080;
}
.leave {
    background-color: #DCDCDC;
}
.administrator {
    z-index: 1;
    user-select: none;
    cursor: pointer;
    width: 100px;
    height: 80px;
    top: 40px;
    background-color: #DCDCDC;
    position: absolute;
    border: 1px solid black;
    overflow: hidden;
}
.sonadministrator1 {
    height: 40px;
    color: black;
    border-bottom: 2px solid black;
}
/* ------------------------------------- */
.centerLeftTop {
    width: 200px;
    height: 100px;
    left: 170px;
    top: 70px;
    border-radius: 20px;
    background-color: #9d9d9d;
    position: absolute;
    overflow: hidden;
}
.centerTop {
    width: 200px;
    height: 100px;
    left: 410px;
    top: 70px;
    border-radius: 20px;
    background-color: #6c6c6c;
    position: absolute;
    overflow: hidden;
}
.centerRightTop {
    width: 200px;
    height: 100px;
    left: 650px;
    top: 70px;
    border-radius: 20px;
    background-color: #3c3c3c;
    position: absolute;
    overflow: hidden;
}
.text1,.text2,.text3 {
    top: 45px;
    left: 20px;
    color: white;
    position: absolute;
}
.fa-eye,.fa-database {
    top: 5px;
    right: 20px;
    font-size: 40px;
    position: absolute;
}
/* ------------------------------------ */
.centerLeft {
    width: 440px;
    height: 250px;
    left: 170px;
    top: 200px;
    border-radius: 20px;
    background-color: aliceblue;
    position: absolute;
    overflow: hidden;
}
.centerRight {
    width: 200px;
    height: 250px;
    left: 650px;
    top: 200px;
    border-radius: 20px;
    background-color: aliceblue;
    position: absolute;
    overflow: hidden;
}
.text41 {
    width: 440px;
    height: 40px;
    line-height: 40px;
    text-indent: 10px;
    border-bottom: 1px solid black;
    position: absolute;
}
.text42 {
    width: 440px;
    height: 100px;
    top: 41px;
    border-bottom: 1px solid black;
    position: absolute;
}
.text43 {
    width: 440px;
    height: 100px;
    top: 141px;
    position: absolute;
}
.fa-list,.fa-arrows-alt {
    top: 35px;
    left: 10px;
    font-size: 30px;
    position: absolute;
}
.texttop {
    width: 280px;
    height: 30px;
    top: 5px;
    left: 50px;
    line-height: 30px;
    position: absolute;
}
.textbottom {
    top: 40px;
    left: 50px;
    font-size: 5px;
    width: 280px;
    height: 60px;
    position: absolute;
}
button {
    top: 40px;
    right: 20px;
    position: absolute;
}
.text51 {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-indent: 5px;
    position: absolute;
}
.text52 {
    width: 200px;
    height: 30px;
    top: 41px;
    line-height: 30px;
    text-indent: 10px;
    position: absolute;
    border-bottom: 1px solid black;
}
.text53 {
    width: 200px;
    height: 50px;
    top: 71px;
    font-weight: 1000;
    line-height: 25px;
    text-indent: 60px;
    position: absolute;
}
.text54 {
    width: 200px;
    height: 50px;
    top: 122px;
    font-weight: 1000;
    line-height: 25px;
    text-indent: 60px;
    position: absolute;
}
.text55 {
    width: 200px;
    height: 50px;
    top: 174px;
    font-weight: 1000;
    line-height: 25px;
    text-indent: 60px;
    position: absolute;
}
.text521 {
    width: 60px;
    height: 30px;
    left: 135px;
    position: absolute;
}
.img1 {
    top: 5px;
    left: 10px;
    width: 40px;
    height: 40px;
    position: absolute;
}
.goodsstyle {
    width: 70px;
    height: 30px;
    left: 60px;
    top: 20px;
    font-weight: 100;
    text-indent: 0;
    position: absolute;
}
.price {
    width: 50px;
    height: 30px;
    top: 10px;
    left: 145px;
    font-weight: 500;
    text-indent: 0;
    position: absolute;
}
.centerLeftBottom {
    width: 440px;
    height: 200px;
    left: 170px;
    top: 480px;
    border-radius: 20px;
    background-color: aliceblue;
    position: absolute;
    overflow: hidden;
}
.centerRightBottom {
    width: 200px;
    height: 200px;
    left: 650px;
    top: 480px;
    border-radius: 20px;
    background-color: aliceblue;
    position: absolute;
    overflow: hidden;
}
.text61 {
    width: 440px;
    height: 40px;
    line-height: 40px;
    text-indent: 10px;
    border-bottom: 1px solid black;
    position: absolute;
}
.text62 {
    top: 40px;
    width: 440px;
    height: 160px;
    position: absolute;
}
.text71 {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-indent: 5px;
    border: 1px solid black;
    position: absolute;
}
.text72 {
    width: 200px;
    height: 160px;
    top: 40px;
    position: absolute;
}
/* ------------------------------- */
.stbbox1 {
    top: 49px;
    left: 151px;
    width: 749px;
    height: 60px;
    background-color: snow;
    position: absolute;
}
.stb1,.stb2,.stb3,.stb4,.stb5,.stb6 {
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    user-select: none;
    cursor: pointer;
    position: absolute;
}
.stb2 {
    left: 100px;
}
.stb3 {
    left: 200px;
}
.stb5 {
    left: 600px;
    width: 50px;
}
.stb4 {
    left: 550px;
    width: 50px;
}
.stb6 {
    left: 650px;
}
.line1,.line2,.line3,.line4 {
    width: 3px;
    height: 30px;
    border-radius: 1px;
    background-color: #dcdcdc;
    position: absolute;
}
.line1 {
    left: 99px;
    top: 15px;
}
.line2 {
    left: 199px;
    top: 15px;
}
.line3 {
    left: 599px;
    top: 15px;
}
.line4 {
    left: 649px;
    top: 15px;
}
/* -------------------------------------------------------------------------------------------------------------------------------- */
.goodsprice1,.goodsprice2,.goodsprice3,.goodsprice4,.goodsprice5,.goodsprice6,.goodsprice7,.goodsprice8,.goodsprice9,.goodsprice10 {
    top: 140px;
    left: 160px;
    width: 130px;
    height: 200px;
    background-color: white;
    border-radius: 10px;
    position: absolute;
}
.goodsprice2 {
    left: 310px;
}
.goodsprice3 {
    left: 460px;
}
.goodsprice4 {
    left: 610px;
}
.goodsprice5 {
    left: 760px;
}
.goodsprice6 {
    top: 360px;
}
.goodsprice7 {
    top: 360px;
    left: 310px;
}
.goodsprice8 {
    top: 360px;
    left: 460px;
}
.goodsprice9 {
    top: 360px;
    left: 610px;
}
.goodsprice10 {
    top: 360px;
    left: 760px;
}
.goodsimg {
    top: 10px;
    left: 10px;
    width: 110px;
    height: 100px;
    border-radius: 10px;
    position: absolute;
}
.goodsimg img {
    width: 110px;
    height: 100px;
}
.goodsmessage {
    top: 120px;
    left: 10px;
    background-color: snow;
    position: absolute;
}
.goodsupdate {
    top: 50px;
    left: 70px;
    width: 20px;
    height: 20px;
    position: absolute;
}
.goodsdelete {
    top: 50px;
    left: 90px;
    width: 20px;
    height: 20px;
    position: absolute;
}
.index1 {
    top: 625px;
    left: 350px;
    position: absolute;
}
.sindex1 {
    width: 30px;
    height: 30px;
    margin-right: 20px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    user-select: none;
    cursor: pointer;
    background-color: white;
    display: inline-block;
}
/* ----------------------------------- */
.stbbox3 {
    top: 140px;
    left: 180px;
    width: 700px;
    height: 550px;
    border-radius: 10px;
    background-color: snow;
    position: absolute;
}
.longgoodsmessage1 {
    top: 30px;
    left: 20px;
    width: 660px;
    height: 100px;
    border: 2px solid #6c6c6c;
    position: absolute;
}
.longgoodsmessage2 {
    top: 140px;
    left: 20px;
    width: 660px;
    height: 100px;
    border: 2px solid #6c6c6c;
    position: absolute;
}
.longgoodsmessage3 {
    top: 250px;
    left: 20px;
    width: 660px;
    height: 100px;
    border: 2px solid #6c6c6c;
    position: absolute;
}
.longgoodsmessage4 {
    top: 360px;
    left: 20px;
    width: 660px;
    height: 100px;
    border: 2px solid #6c6c6c;
    position: absolute;
}
.index2 {
    top: 500px;
    left: 175px;
    position: absolute;
}
.sindex2 {
    width: 30px;
    height: 30px;
    margin-right: 20px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    user-select: none;
    cursor: pointer;
    border: 1px solid #6c6c6c;
    background-color: white;
    display: inline-block;
}
.lgmimg {
    top: 10px;
    left: 10px;
    width: 80px;
    height: 80px;
    background-color: black;
    position: absolute;
}
.lgmimg img {
    width: 80px;
    height: 80px;
}
.lgmname {
    top: 10px;
    left: 100px;
    width: 200px;
    height: 80px;
    line-height: 80px;
    position: absolute;
}
.lgmprice {
    top: 10px;
    left: 320px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    position: absolute;
}
.lgmstatus {
    top: 10px;
    left: 420px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    position: absolute;
}
.lgmupdate {
    top: 10px;
    left: 560px;
    width: 40px;
    height: 80px;
    line-height: 80px;
    position: absolute;
}
.lgmdelete {
    top: 10px;
    left: 600px;
    width: 40px;
    height: 80px;
    line-height: 80px;
    position: absolute;
}
/* ------------------------------------------------------------------------- */
.stbbox4 {
    top: 140px;
    left: 180px;
    width: 700px;
    height: 500px;
    border-radius: 10px;
    background-color: snow;
    position: absolute;
}
.goods1,.goods2,.goods3,.goods4,.goods5,.goods6,.goods7,.goods8,.goods9 {
    top: 50px;
    left: 50px;
    width: 150px;
    height: 70px;
    border-radius: 5px;
    border: 2px solid #dcdcdc;
    background-color: snow;
    position: absolute;
}
.goods2 {
    top: 50px;
    left: 250px;
}
.goods3 {
    top: 50px;
    left: 450px;
}
.goods4 {
    top: 170px;
    left: 50px;
}
.goods5 {
    top: 170px;
    left: 250px;
}
.goods6 {
    top: 170px;
    left: 450px;
}
.goods7 {
    top: 290px;
    left: 50px;
}
.goods8 {
    top: 290px;
    left: 250px;
}
.goods9 {
    top: 290px;
    left: 450px;
}
.sg1,.sg2,.sg3,.sg4,.sg5,.sg6,.sg7,.sg8,.sg9 {
    width: 73px;
    height: 73px;
    border-radius: 3px;
    line-height: 70px;
    text-align: center;
    user-select: none;
    cursor: pointer;
    font-size: 20px;
    color: white;
    background-color: #9d9d9d;
    position: absolute;
}
.sg9 {
    font-size: 40px;
}
.message1,.message2,.message3,.message4,.message5,.message6,.message7,.message8,.message9 {
    left: 73px;
    height: 73px;
    position: absolute;
}
h4,h6 {
    margin: 2px;
}
.message9 {
    line-height: 68px;
}
.save,.cancel {
    top: 420px;
    left: 50px;
    width: 80px;
    height: 30px;
    color: white;
    background-color: #3c3c3c;
    border-radius: 3px;
    line-height: 30px;
    text-align: center;
    user-select: none;
    cursor: pointer;
    position: absolute;
}
.cancel {
    left: 160px;
    background-color: #9d9d9d;
}
/* --------------------------------- */
.stbbox5 {
    top: 140px;
    left: 180px;
    width: 700px;
    height: 550px;
    border-radius: 10px;
    background-color: snow;
    position: absolute;
}
.updateselect {
    top: 80px;
    left: 50px;
    position: absolute;
}
.updatename {
    top: 120px;
    left: 50px;
    position: relative;
}
.updatename input {
    width: 500px;
}
.updateprice {
    top: 140px;
    left: 50px;
    position: relative;
}
.updateprice input {
    width: 500px;
}
.updateimg {
    top: 160px;
    left: 50px;
    position: relative;
}
.updatemessage {
    top: 220px;
    left: 50px;
    position: relative;
}
.addimg {
    left: 78px;
    width: 60px;
    height: 60px;
    background-color: white;
    border: 2px solid #808080;
    border-radius: 5px;
    position: absolute;
}
.addimage {
    left: 13px;
    user-select: none;
    cursor: pointer;
    line-height: 62px;
    font-size: 40px;
    color: rgba(128,128,128,0.3);
    position: absolute;
}
textarea {
    height: 80px;
    width: 500px;
    resize: none;
    vertical-align: text-top;
}
.save1,.cancel1 {
    top: 450px;
    left: 50px;
    width: 80px;
    height: 30px;
    color: white;
    background-color: #3c3c3c;
    border-radius: 3px;
    line-height: 30px;
    text-align: center;
    user-select: none;
    cursor: pointer;
    position: absolute;
}
.cancel1 {
    left: 160px;
    background-color: #9d9d9d;
}
.fa-pencil,.fa-trash {
    cursor: pointer;
}